<template>
  <div class="layout-title">
    <title-bar v-if="true" title="使用NavBar" />
    <div class="body">
      <div v-for="(item, index) in list" :key="index" class="item">
        {{ item }}
      </div>
    </div>
    <div class="footer">footer</div>
  </div>
</template>
<script>
import TitleBar from "@/components/title-bar";
export default {
  data() {
    return {
      active: 0,
      list: [],
      showTabs: false,
    };
  },
  components: {
    TitleBar,
  },
  mounted() {
    for (let i = 1; i <= 30; i++) {
      this.list.push(i);
    }
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.layout-title {
  width: 100vw;
  height: 100%;
  background-color: #f6f9ff;
}

.body {
  .item {
    margin: 12px 16px;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    background-color: #fff;
    min-height: 80px;
    display: flex;
    justify-content: center;
  }
}
.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 46px;
  background-color: #dedede;
  text-align: center;
}
@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
  .footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 46px;
    padding-bottom: costant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: 32px;
    background-color: #dedede;
    text-align: center;
  }
}
</style>